<template>
  <div class="container">
    <div class="charts">
      <div class="chart" style="width:500px">
        <equ-province-chart></equ-province-chart>
      </div>
      <div class="chart" style="">
        <equ-years-chart></equ-years-chart>
      </div>
      <div class="chart" style="">
        <equ-chart></equ-chart> 
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%; height: 98%; "
        v-loading="loading"
        fit
        height="750"
      >
        <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
        <el-table-column prop="t001" label="设备品种"></el-table-column>
        <!-- <el-table-column prop="t002" label="企业编号"></el-table-column> -->
        <el-table-column prop="t003" label="设备型号"></el-table-column>
        <el-table-column prop="t004" label="注册编码"></el-table-column>
        <el-table-column prop="t005" label="使用单位"></el-table-column>
        <el-table-column prop="t006" label="投用日期"></el-table-column>
        <el-table-column prop="t007" label="额定起重量"></el-table-column>
        <!-- <el-table-column prop="t007" label="使用年限"></el-table-column> -->
        <!-- <el-table-column prop="t008" label="工作级别"></el-table-column> -->
        <el-table-column prop="t009" label="起升高度"></el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 50, 80]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { req } from "@/api/base/BaseApi";
import EquChart from "./equChart.vue";
import EquYearsChart from "./equYearsChart.vue";
import EquProvinceChart from "./equProvinceChart.vue"
export default {
  created() {
    this.searchList();
  },
  components: {
    EquChart,
    EquYearsChart,
    EquProvinceChart
  },
  data() {
    return {
      tableData: [
        {
          Id: 1,
          t001: "冶金桥式起重机",
          t002: "一钢轧 008",
          t003: "QD200/63-23.5A7",
          t004: "41003405002006080017",
          t005: "马鞍山钢铁股份有限公司",
          t006: "2004/7/1",
          t007: "200/63 t",
          t009: "28/28 m/min",
        },
        {
          Id: 2,
          t001: "冶金桥式起重机",
          t002: "一钢轧 003",
          t003: "QD190/63-22.3A7",
          t004: "40103405022003090602",
          t005: "马鞍山钢铁股份有限公司",
          t006: "2003/9/1",
          t007: "190/63 t",
          t009: "26/32 m/min",
        },
      ], // 表格数据
      total: 0, // 表格数据总项数
      loading: false, // 表格是否在加载
      pageSize: 30, // 默认一页15项数据
      currentPage: 1,
      equUser: "", // 设备的使用单位
      equList: [], // 某个使用单位的起重机列表
      equTotal: 0, // 表格数据总项数
      equPageSize: 10,
      equCurrentPage: 1,
    };
  },
  props: {
    checkUnit: String,
  },
  methods: {
    // 获取数据
    async searchList() {},
    // 页面大小改变
    async pageSizeChange(pageSize) {},
    // 页数改变
    async pageChange(page) {},
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    // 通过使用单位名称获取设备列表
    showEquList(name, total) {
      this.dialogTitle = name;
      this.equTotal = total;
      // 获取起重机列表
      this.equUser = name;
      this.searchEquList(total);
      this.dialogVisible = true;
    },
    // 获取数据
    async searchEquList() {
      const { data } = await req("/lifting-service/info/liftinginfo", "GET", {
        user: this.equUser,
        pageNum: this.equCurrentPage,
        pageSize: this.equPageSize,
      });
      let { list, total } = data;
      list = list.slice(0, this.equTotal);
      this.generateEquIds(list);
      this.equList = list;
    },
    // 页面大小改变
    async equPageSizeChange(pageSize) {
      this.equPageSize = pageSize;
      this.equCurrentPage = 1;
      // 获取数据
      this.searchEquList();
    },
    // 页数改变
    async equPageChange(page) {
      this.equCurrentPage = page;
      // 获取数据
      this.searchEquList();
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .charts {
    display: flex;
    flex-direction: row;
    .chart {
    }
  }
}
.allbody {
  // background-image: url("../../../../../assets/bg.jpg");
}
</style>